<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>站长中心-CSS迷宫</title>
<style type="text/css">
body{background:#333;color:#fff;}
.maze{
width:110px;
height:120px;
background:url(images/m4.png) no-repeat 0 -20px;
position:relative;
margin:20px auto;
border:3px solid red;
}
.maze a{
width:10px;
height:10px;
position:absolute;
top:0;
left:0;
z-index:99;
}
.maze a:hover{
background:#fff url(images/m4.png) no-repeat 0 0;
position:absolute;
left:0!important;
top:0!important;
width:110px;
height:120px;
z-index:1;
}
 
.maze .a a{top:0;}
.maze .b a{top:10px;}
.maze .c a{top:20px;}
.maze .d a{top:30px;}
.maze .e a{top:40px;}
.maze .f a{top:50px;}
.maze .g a{top:60px;}
.maze .h a{top:70px;}
.maze .i a{top:80px;}
.maze .j a{top:90px;}
.maze .k a{top:100px;}
.maze .l a{top:110px;}
 
 
.maze a.a1{left:0}
.maze a.a2{left:10px}
.maze a.a3{left:20px}
.maze a.a4{left:30px;}
.maze a.a5{left:40px;}
.maze a.a6{left:50px}
.maze a.a7{left:60px;}
.maze a.a8{left:70px;}
.maze a.a9{left:80px;}
.maze a.a10{left:90px}
.maze a.a11{left:100px}
 
 
.maze a.a1:hover{background-position:0 0}
.maze a.a2:hover{background-position:-10px 0}
.maze a.a3:hover{background-position:-20px 0}
.maze a.a4:hover{background-position:-30px 0}
.maze a.a5:hover{background-position:-40px 0}
.maze a.a6:hover{background-position:-50px 0}
.maze a.a7:hover{background-position:-60px 0}
.maze a.a8:hover{background-position:-70px 0}
.maze a.a9:hover{background-position:-80px 0}
.maze a.a10:hover{background-position:-90px 0}
.maze a.a11:hover{background-position:-100px 0}
 
.maze .b a.a1:hover{background-position:0 20px}
.maze .b a.a2:hover{background-position:-10px 20px}
.maze .b a.a3:hover{background-position:-20px 20px}
.maze .b a.a4:hover{background-position:-30px 20px}
.maze .b a.a5:hover{background-position:-40px 20px}
.maze .b a.a6:hover{background-position:-50px 20px}
.maze .b a.a7:hover{background-position:-60px 20px}
.maze .b a.a8:hover{background-position:-70px 20px}
.maze .b a.a9:hover{background-position:-80px 20px}
.maze .b a.a10:hover{background-position:-90px 20px}
.maze .b a.a11:hover{background-position:-100px 20px}
 
.maze .c a.a1:hover{background-position:0 10px}
.maze .c a.a2:hover{background-position:-10px 10px}
.maze .c a.a3:hover{background-position:-20px 10px}
.maze .c a.a4:hover{background-position:-30px 10px}
.maze .c a.a5:hover{background-position:-40px 10px}
.maze .c a.a6:hover{background-position:-50px 10px}
.maze .c a.a7:hover{background-position:-60px 10px}
.maze .c a.a8:hover{background-position:-70px 10px}
.maze .c a.a9:hover{background-position:-80px 10px}
.maze .c a.a10:hover{background-position:-90px 10px}
.maze .c a.a11:hover{background-position:-100px 10px}
 
.maze .d a.a1:hover{background-position:0 0px}
.maze .d a.a2:hover{background-position:-10px 0}
.maze .d a.a3:hover{background-position:-20px 0}
.maze .d a.a4:hover{background-position:-30px 0}
.maze .d a.a5:hover{background-position:-40px 0}
.maze .d a.a6:hover{background-position:-50px 0}
.maze .d a.a7:hover{background-position:-60px 0}
.maze .d a.a8:hover{background-position:-70px 0}
.maze .d a.a9:hover{background-position:-80px 0}
.maze .d a.a10:hover{background-position:-90px 0}
.maze .d a.a11:hover{background-position:-100px 0}
 
.maze .e a.a1:hover{background-position:0 -10px}
.maze .e a.a2:hover{background-position:-10px -10px}
.maze .e a.a3:hover{background-position:-20px -10px}
.maze .e a.a4:hover{background-position:-30px -10px}
.maze .e a.a5:hover{background-position:-40px -10px}
.maze .e a.a6:hover{background-position:-50px -10px}
.maze .e a.a7:hover{background-position:-60px -10px}
.maze .e a.a8:hover{background-position:-70px -10px}
.maze .e a.a9:hover{background-position:-80px -10px}
.maze .e a.a10:hover{background-position:-90px -10px}
.maze .e a.a11:hover{background-position:-100px -10px}
 
.maze .f a.a1:hover{background-position:0 -20px}
.maze .f a.a2:hover{background-position:-10px -20px}
.maze .f a.a3:hover{background-position:-20px -20px}
.maze .f a.a4:hover{background-position:-30px -20px}
.maze .f a.a5:hover{background-position:-40px -20px}
.maze .f a.a6:hover{background-position:-50px -20px}
.maze .f a.a7:hover{background-position:-60px -20px}
.maze .f a.a8:hover{background-position:-70px -20px}
.maze .f a.a9:hover{background-position:-80px -20px}
.maze .f a.a10:hover{background-position:-90px -20px}
.maze .f a.a11:hover{background-position:-100px -20px}
 
.maze .g a.a1:hover{background-position:0 -60px}
.maze .g a.a2:hover{background-position:-10px -30px}
.maze .g a.a3:hover{background-position:-20px -30px}
.maze .g a.a4:hover{background-position:-30px -30px}
.maze .g a.a5:hover{background-position:-40px -30px}
.maze .g a.a6:hover{background-position:-50px -30px}
.maze .g a.a7:hover{background-position:-60px -30px}
.maze .g a.a8:hover{background-position:-70px -30px}
.maze .g a.a9:hover{background-position:-80px -30px}
.maze .g a.a10:hover{background-position:-90px -30px}
.maze .g a.a11:hover{background-position:-100px -30px}
 
.maze .h a.a1:hover{background-position:0 -40px}
.maze .h a.a2:hover{background-position:-10px -40px}
.maze .h a.a3:hover{background-position:-20px -40px}
.maze .h a.a4:hover{background-position:-30px -40px}
.maze .h a.a5:hover{background-position:-40px -40px}
.maze .h a.a6:hover{background-position:-50px -40px}
.maze .h a.a7:hover{background-position:-60px -40px}
.maze .h a.a8:hover{background-position:-70px -40px}
.maze .h a.a9:hover{background-position:-80px -40px}
.maze .h a.a10:hover{background-position:-90px -40px}
.maze .h a.a11:hover{background-position:-100px -40px}
 
.maze .i a.a1:hover{background-position:0 -50px}
.maze .i a.a2:hover{background-position:-10px -50px}
.maze .i a.a3:hover{background-position:-20px -50px}
.maze .i a.a4:hover{background-position:-30px -50px}
.maze .i a.a5:hover{background-position:-40px -50px}
.maze .i a.a6:hover{background-position:-50px -50px}
.maze .i a.a7:hover{background-position:-60px -50px}
.maze .i a.a8:hover{background-position:-70px -50px}
.maze .i a.a9:hover{background-position:-80px -50px}
.maze .i a.a10:hover{background-position:-90px -50px}
.maze .i a.a11:hover{background-position:-100px -50px}
 
.maze .j a.a1:hover{background-position:0 -60px}
.maze .j a.a2:hover{background-position:-10px -60px}
.maze .j a.a3:hover{background-position:-20px -60px}
.maze .j a.a4:hover{background-position:-30px -60px}
.maze .j a.a5:hover{background-position:-40px -60px}
.maze .j a.a6:hover{background-position:-50px -60px}
.maze .j a.a7:hover{background-position:-60px -60px}
.maze .j a.a8:hover{background-position:-70px -60px}
.maze .j a.a9:hover{background-position:-80px -60px}
.maze .j a.a10:hover{background-position:-90px -60px}
.maze .j a.a11:hover{background-position:-100px -60px}
 
.maze .k a.a1:hover{background-position:0 -70px}
.maze .k a.a2:hover{background-position:-10px -70px}
.maze .k a.a3:hover{background-position:-20px -70px}
.maze .k a.a4:hover{background-position:-30px -70px}
.maze .k a.a5:hover{background-position:-40px -70px}
.maze .k a.a6:hover{background-position:-50px -70px}
.maze .k a.a7:hover{background-position:-60px -70px}
.maze .k a.a8:hover{background-position:-70px -70px}
.maze .k a.a9:hover{background-position:-80px -70px}
.maze .k a.a10:hover{background-position:-90px -70px}
.maze .k a.a11:hover{background-position:-100px -70px}
 
.maze .l a.a1:hover{background-position:0 -80px}
.maze .l a.a2:hover{background-position:-10px -80px}
.maze .l a.a3:hover{background-position:-20px -80px}
.maze .l a.a4:hover{background-position:-30px -80px}
.maze .l a.a5:hover{background-position:-40px -80px}
.maze .l a.a6:hover{background-position:-50px -80px}
.maze .l a.a7:hover{background-position:-60px -80px}
.maze .l a.a8:hover{background-position:-70px -80px}
.maze .l a.a9:hover{background-position:-80px -80px}
.maze .l a.a10:hover{background-position:-90px -80px}
.maze .l a.a11:hover{background-position:-100px -80px}
 
.maze a b{
left:-999em;
position:absolute;
top:0;
background:red;
color:#fff;
font-weight:bold;
text-align:center;
line-height:120px;
width:110px;
line-height:120px;
z-index:999;
}
.maze a:hover b{left:0!important}
 
.maze a.off:hover{
width:110px!important;
height:120px!important;
position:absolute!important;
top:0!!important;
left:0!important;
z-index:99;
background:#000!important;
}
.header{
width:400px;
margin:auto;
text-align:center;
}
</style>
</head>
 
<body>
<div class="header">
<h1>CSS迷宫</h1>
<p>周围的黑线跟踪鼠标，直到你到达终点
 
没有加入这样的错误检查不作弊移动断了线
 
当心黑洞！</p>
</div>
<div class="maze">
<span class="a">
<a class="a1" href="#"></a>
<a class="a2" href="#"></a>
<a class="a3" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"></a>
<a class="a11" href="#"></a>
 
</span>
<span class="b">
<a class="a1" href="#"></a>
<a class="a2" href="#"></a>
<a class="a3" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"></a>
<a class="a11" href="#"></a>
</span>
<span class="c">
<a class="a1"  href="#"></a>
<a class="a2" href="#"></a>
<a class="a3 off" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"></a>
<a class="a11" href="#"></a>
</span>
<span class="d">
<a class="a1" href="#"></a>
<a class="a2" href="#"></a>
<a class="a3" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"></a>
<a class="a11" href="#"></a>
</span>
<span class="e">
<a class="a1 off" href="#"></a>
<a class="a2" href="#"></a>
<a class="a3" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"></a>
<a class="a11" href="#"></a>
</span>
 
<span class="f">
<a class="a1" href="#"></a>
<a class="a2" href="#"></a>
<a class="a3" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6 off" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"></a>
<a class="a11" href="#"></a>
</span>
/*http://www.software8.co       */
<span class="g">
<a class="a1" href="#"></a>
<a class="a2" href="#"></a>
<a class="a3" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"></a>
<a class="a11" href="#"></a>
</span>
<span class="h">
<a class="a1" href="#"></a>
<a class="a2" href="#"></a>
<a class="a3" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"></a>
<a class="a11" href="#"></a>
</span>
 
<span class="i">
<a class="a1" href="#"></a>
<a class="a2" href="#"></a>
<a class="a3" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"></a>
<a class="a11" href="#"></a>
</span>
 
<span class="j">
<a class="a1" href="#"></a>
<a class="a2" href="#"></a>
<a class="a3" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"></a>
<a class="a11" href="#"></a>
</span>
 
<span class="k">
<a class="a1" href="#"></a>
<a class="a2" href="#"></a>
<a class="a3" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"><b>Well done !!</b></a>
<a class="a11" href="#"></a>
</span>
 
<span class="l">
<a class="a1" href="#"></a>
<a class="a2" href="#"></a>
<a class="a3" href="#"></a>
<a class="a4" href="#"></a>
<a class="a5" href="#"></a>
<a class="a6" href="#"></a>
<a class="a7" href="#"></a>
<a class="a8" href="#"></a>
<a class="a9" href="#"></a>
<a class="a10" href="#"></a>
<a class="a11 off" href="#"></a>
</span>
</div>
 
</body>
</html>